<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人详情</title>
    <link rel="stylesheet" href="/static/paper/plugins/element-ui/index.css"/>
    <script src="/static/paper/plugins/vue/vue.js"></script>
    <script src="/static/paper/plugins/element-ui/index.js"></script>
    <style>
        body {
            margin: 0; /* 去掉默认的 body 边距 */
            padding: 0; /* 去掉默认的 body 填充 */
            background-color: #f5f5f5; /* 可选：设置背景颜色 */
        }

        #app {
            margin-top: 20px; /* 上边距 */
            margin-left: 20px; /* 左边距 */
            margin-right: 20px;
            margin-bottom: 20px;
            padding: 20px; /* 可选：内部填充 */
            background-color: white; /* 可选：内容背景颜色 */
            border-radius: 5px; /* 可选：圆角 */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 可选：阴影效果 */
        }

        .is-selected {
            color: #1989FA; /* 选中日期的颜色 */
        }

        .status-tag {
            margin: 2px; /* 标签之间的间距 */
        }

        .calendar-container {
            height: 760px; /* 设置日历组件的高度 */
        }
    </style>
</head>
<body>
<div id="app">
    <el-page-header @back="goBack" :content="'个人详情 - ' + userName" style="margin-bottom: 20px;">
    </el-page-header>
    <div class="calendar-container">
        <el-calendar @cell-click="handleDateClick" :first-day-of-week="0">
            <template slot="dateCell" slot-scope="{ date, data }">
                <p :class="data.isSelected ? 'is-selected' : ''">
                    {{ data.day.split('-').slice(2).join('-') }}
                    <span v-if="shouldShowNumber(data.day)">
                        <el-tag v-if="getNumber(data.day) === -1" type="danger" size="mini" class="status-tag">
                            <i class="el-icon-error" style="margin-right: 4px;"></i> 未提交
                        </el-tag>
                        <el-tag v-else-if="getNumber(data.day) === 0" type="info" size="mini" class="status-tag">
                            <i class="el-icon-info" style="margin-right: 4px;"></i> 休息
                        </el-tag>
                        <el-tag v-else-if="getNumber(data.day) === 1" type="success" size="mini" class="status-tag">
                            <i class="el-icon-success" style="margin-right: 4px;"></i> 已提交
                        </el-tag>
                        <el-tag v-else-if="getNumber(data.day) === 2" type="primary" size="mini" class="status-tag">
                            <i class="el-icon-info" style="margin-right: 4px;"></i> 请假
                        </el-tag>
                        <el-tag v-else-if="getNumber(data.day) === 3" type="primary" size="mini" class="status-tag">
                            <i class="el-icon-info" style="margin-right: 4px;"></i> 休假
                        </el-tag>
                    </span>


                </p>
            </template>
        </el-calendar>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                selectedDate: null, // 存储选中的日期
                dateValues: {}, // 存储从 API 获取的日期数据
                em_id: null, // 动态 ID 示例
                userName: null
            };
        },
        mounted() {
            this.getEmIdFromUrl(); // 获取 em_id
            this.fetchData(); // 组件挂载后获取数据
        },
        methods: {
            getEmIdFromUrl() {
                const urlParams = new URLSearchParams(window.location.search);
                this.em_id = urlParams.get('em_id')
            },
            fetchData() {
                fetch(`/daypaper/particular/${this.em_id}`)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('网络响应不成功');
                        }
                        return response.json();
                    })
                    .then(data => {
                        // 将 daypapers 数据存入 dateValues
                        this.dateValues = data.data.records[0].daypapers;
                        this.userName = data.data.records[0].name;
                        console.log("打印名字： ", this.userName)
                    })
                    .catch(error => {
                        console.error('获取数据时出错:', error);
                    });
            },
            handleDateClick(date) {
                this.selectedDate = date; // 更新选中的日期
                console.log('选中的日期:', date); // 打印选中的日期
            },
            // 判断是否需要显示数字
            shouldShowNumber(day) {
                return this.dateValues[day] !== undefined; // 如果在数据中有这个日期，则返回 true
            },
            // 根据日期返回对应的值
            getNumber(day) {
                return this.dateValues[day]; // 返回对应日期的值
            },
            goBack() {
                window.history.back(); // 返回到上一个页面
            }
        }
    });
</script>
</body>
</html>
